<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    * 非受控组件将数据存储在`DOM`中，而不是组件内，这比较类似于传统的`HTML`表单元素
    *   非受控组件的值不受组件自身的`state`和`props`控制
    *   非受控组件使用`ref`从`DOM`中获取元素数据
    * */
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
        }

        render() {
            return (
                <div className="app">
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref={c => this.name = c}/>
                        <input type="text" ref={c => this.password = c}/>
                        <button>登录</button>
                    </form>
                </div>
            );
        }

        handleSubmit = (event) => {
            // 阻止表单的默认提交行为
            event.preventDefault()
            // 解构赋值拿到DOM节点
            const {name, password} = this
            alert(`用户名是${name.value},密码是${password.value}`)
        }
    }
    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>